<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>生成手机封面</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.css"/>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>

<link rel="stylesheet" type="text/css" href="js/farbtastic.css"/>
<script type="text/javascript" src="js/farbtastic.js"></script>

<link rel="stylesheet" type="text/css" href="css/jquery.nstSlider.min.css"/>
<script type="text/javascript" src="js/jquery.nstSlider.min.js"></script>

<script type="text/javascript" src="js/html2canvas.min.js"></script>
<style>
.w980{width:980px;margin:auto;display:block; border:#ddd solid; border-width:0 1px;}
#picker{position:absolute;right:0px;top:100%;}

.vbox,.hbox{position:relative; box-shadow:0 0 5px #000;}
.vbox{width:320px;height:480px;float:left;}
.hbox{width:600px;height:450px;float:right;}
.vbox .logo{max-width:50%;position:absolute;top:15%;left:50%;margin-left:-25%;}
.hbox .logo{max-width:50%;position:absolute;top:50%;left:50%;margin:-25% 0 0 -25%;}

.bgList .bgBar{border-top:#CCC solid 1px;margin-top:5px;padding-top:5px;}

#dwBox a{display:block;float:left; border-radius:5px; padding:5px; background:#FFF; border:#666 solid 1px; text-align:center; box-shadow:0 0 3px rgba(0,0,0,.5);margin:0 10px 5px 0px;}
#dwBox a img{width:100px;}
#dwBox a strong{display:block;}

</style>
</head>

<body>
<div style="background:#DDD;padding:5px; box-shadow:0 0 5px rgba(0,0,0,.7)">
    <form class="form-inline w980">
    	<div class="row">
            <div class="form-group col-md-4">
                <label for="exampleInputFile">选择Logo</label>
                <input type="file" id="logo">
            </div>
            <div class="form-group col-md-3" style="position:relative;">
                <div class="input-group">
                  <div class="input-group-addon">背景颜色</div>
                  <input type="text" class="form-control" id="bgcolor" value="#123456">
                </div>
                <div id="picker" style="position:absolute; z-index:9"></div>
            </div>
            <div class="form-group col-md-2">
            	<label for="exampleInputFile">操作</label>
                <button type="button" class="MakeFM btn btn-success btn-block glyphicon glyphicon-ok-sign"> 生成封面</button>
            </div>
        </div>
        <div class="row bgList">
        	<div class="bgBar">
                <div class="form-group col-md-4">
                    <label for="exampleInputFile">选择背景</label>
                    <input type="file" id="bgr" class="bgr">
                </div>
                <div class="form-group col-md-2">
                    <label for="exampleInputFile">背景位置</label>
                    <select id="pos" class="form-control">
                      <option value="left top">左上</option>
                      <option value="left center">左中</option>
                      <option value="left bottom">左下</option>
                      <option value="center top">中上</option>
                      <option value="center center">中中</option>
                      <option value="center bottom">中下</option>
                      <option value="right top">右上</option>
                      <option value="right center">右中</option>
                      <option value="right bottom">右下</option>
                    </select>
                </div>
                <div class="form-group col-md-2">
                    <label for="exampleInputFile">平铺方式</label>
                    <select id="pingpu" class="form-control">
                      <option value="no-repeat">不平铺</option>
                      <option value="repeat">平铺</option>
                      <option value="repeat-x">横向平铺</option>
                      <option value="repeat-y">丛向平铺</option>
                    </select>
                </div>
                <div class="form-group col-md-2">
                    <label for="exampleInputFile">背景大小</label>
                    <select id="bgsz" class="form-control">
                      <option value="auto">auto</option>
                      <option value="cover">cover</option>
                      <option value="contain">contain</option>
                      <option value="">自定义</option>
                    </select>
                </div>
                <div class="form-group col-md-2">
                    <label for="exampleInputFile">添加</label>
                    <button type="button" class="addBG btn btn-default btn-block glyphicon glyphicon-plus-sign"> 添加背景</button>
                </div>
	        	<div class="clearfix"></div>
            </div>
        </div>
        <div class="clearfix"></div>
        <div id="dwBox"></div>
        <div class="clearfix"></div>
    </form>
</div>
<div style="clear:both;height:5px;"></div>
<div class="w980">
	<div id="demo1" class="vbox fengm">
    	<img class="logo" />
    </div>
    <div class="hbox fengm">
    	<img class="logo" />
    </div>
<div class="clearfix"></div>
</div>

<canvas></canvas>
<script>
$('.fengm').css({backgroundColor:$('#bgcolor').val()});
$('#logo').change(function(){
	getFileUrl('logo',function(url){
		$('.logo').attr('src',url);
	});
})
//背景
$('.addBG').click(function(){
	$('.bgList .bgBar:eq(0)').clone().appendTo('.bgList');
	$('.bgList .bgBar:last .addBG').removeClass('addBG').removeClass('glyphicon-plus-sign').addClass('glyphicon-remove-sign delBG').text('删除背景');
	$('.delBG').click(function(){$(this).parents('.bgBar').empty().remove();bginit()});
	$bgBar=$('.bgList .bgBar:last');
	$bgBar.find('#bgr').attr({id:'bgr'+$bgBar.index()});
	$('.bgList .bgBar:last select,.bgList .bgBar:last input').change(function(){bginit()});
})
$('#bgcolor').focus(function(){
	$('#picker').show().farbtastic('.fengm,#bgcolor');
}).blur(function(){
	$('#picker').hide();
});
$('.bgList .bgBar select,.bgList .bgBar input').change(function(){bginit()});
function bginit(){console.log($('.bgList .bgBar').size())
	var bg=[],sz=[],ps=[],pp=[],bgArr=[];
	$('.bgList .bgBar').each(function(i, elm){
		var bgid=$(this).find('.bgr').attr('id'),bgv=$(this).find('.bgr').val();console.log(bgv)
		if(bgv){
			var pos=$(this).find('#pos').val(),pin=$(this).find('#pingpu').val(),szv=$(this).find('#bgsz').val();
			//var bg='',ps='',pp='',sz='';
			getFileUrl(bgid,function(url){
				//bgArr.push({url:url,pos:pos,pp:pp,sz:szv});
				bg.push('url('+url+')');
				ps.push(pos);
				pp.push(pin);
				sz.push(szv);
				var e=$('.fengm');
				//bg=e.css('background-image'),ps=e.css('background-Position'),pp=e.css('background-Repeat'),sz=e.css('background-Size');
				//bg=bg=='none'?'url('+url+')':bg+',url('+url+')'
				console.log(ps)
				e.css({backgroundImage:bg,backgroundPosition:ps,backgroundRepeat:pp,backgroundSize:sz});
				
				/*if(bgArr.length==$('.bgList .bgBar').size()){
					$.each(bgArr,function(i,t){
						bj+='url('+t.url+'),';
						ps+=pos+',';
						pp+=pin+','
						sz+=$(this).find('#bgsz').val()+',';
					});
					bj=bj.replace(/\,$/g,' '),sz=sz.replace(/\,$/g,''),ps=ps.replace(/\,$/g,''),pp=pp.replace(/\,$/g,'');
					console.log(bj)
					$('.fengm').css({backgroundImage:bj,backgroundPosition:ps,backgroundRepeat:pp,backgroundSize:sz});
				}*/
			})
		}
    });
}
/** 
* 从 file 域获取 本地图片 url 
*/ 
function getFileUrl(sourceId,fun) { 
	var url; 
	if (navigator.userAgent.indexOf("MSIE")>=1) { // IE 
		url = document.getElementById(sourceId).value; 
	} else if(navigator.userAgent.indexOf("Firefox")>0) { // Firefox 
		url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0)); 
	} else if(navigator.userAgent.indexOf("Chrome")>0) { // Chrome 
		url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0)); 
	}
	var c=document.createElement('canvas'),
		ctx=c.getContext('2d')
	ctx.rect(0,0,c.width,c.height);
	
	var img=new Image;
	img.crossOrigin = 'Anonymous'; //解决跨域
	img.src=url;
	img.onload=function(){
		c.width=img.width
		c.height=img.height
		ctx.drawImage(img,0,0);
		pic=c.toDataURL("image/png");
		//console.log(pic)
		fun(pic);
	}
	
}
var scrArr=[{"dev":"iphone","type":"v","size":"320x480","title":"iPhone3"},
{"dev":"iphone","type":"v","size":"640x960","title":"iPhone4"},
{"dev":"iphone","type":"v","size":"640x1136","title":"iPhone5/iPhone5s"},
{"dev":"iphone","type":"v","size":"750x1334","title":"iPhone6"},
{"dev":"iphone","type":"v","size":"1242x2208","title":"iPhone6 Plus"},
{"dev":"iphone","type":"h","size":"2208x1242","title":"iPhone6 Plus 横屏"},
{"dev":"ipad","type":"v","size":"768x1004","title":"iPad竖屏启动图片"},
{"dev":"ipad","type":"h","size":"1024x748","title":"iPad横屏启动图片"},
{"dev":"ipad","type":"v","size":"768x1024","title":"iOS7竖屏启动图片"},
{"dev":"ipad","type":"h","size":"1024x768","title":"iPad iOS7横屏启动图片"},
{"dev":"ipad","type":"v","size":"1536x2008","title":"iPad高分屏竖屏图片"},
{"dev":"ipad","type":"h","size":"2048x1496","title":"iPad高分屏横屏启动图片"},
{"dev":"ipad","type":"v","size":"1536x2048","title":"iPad iOS7高分屏竖屏图片"},
{"dev":"ipad","type":"h","size":"2048x1536","title":"iPad iOS7高分屏横屏图片"},
{"dev":"android","type":"v","size":"240x282","title":"普通屏启动图片"},
{"dev":"android","type":"v","size":"320x442","title":"大屏启动图片"},
{"dev":"android","type":"v","size":"480x762","title":"高分屏启动图片"},
{"dev":"android","type":"v","size":"720x1242","title":"720P高分屏启动图片"},
{"dev":"android","type":"v","size":"1080x1882","title":"1080P高分屏启动图片"}];

var canvas = document.querySelector("canvas");
    var ctx = canvas.getContext("2d");

    var ctx = canvas.getContext('2d');

$('.MakeFM').click(function(){
	 makefm(0)
	 $('#dwBox').html('<div class="alert alert-info">正在生成，请勿刷新或滚动页面！只有 Firefox 和 Chrome 支持 download 属性（点击下载），其他浏览器请拖动到桌面的方式下载。</div>');
})
function makefm(i){
	var t=scrArr[i],sz=t.size.split('x');
	$("#demo1").css({width:sz[0],height:sz[1]});
	var lw=$("#demo1 .logo").width(),bw=$("#demo1").width(),ml=lw*0.5;
	$("#demo1 .logo").css({marginLeft:'-'+(ml)+'px'})
	
	setTimeout(function(){
		mkimg(i,t)
	},100)
}
function mkimg(i,t){
	html2canvas(document.querySelector("#demo1")).then(function(canvas) {
		$('#dwBox').append('<a href="'+canvas.toDataURL("image/png")+'" download="'+t.size+'.png" title="'+t.title+'['+t.dev+']'+'"><img src="'+canvas.toDataURL("image/png")+'"><strong>'+t.size+'</strong></a>');
		i+=1;
		mk=setTimeout(function(){
			 makefm(i);
		},100)
		if(i==scrArr.length){
			$('#dwBox a').click(function(){
				$(this).css({boxShadow:'0 0 3px rgba(18, 52, 86,.5)'}).click();
			})
			$("#demo1").removeAttr('style').css({backgroundColor:$('#bgcolor').val()});
			clearTimeout(mk);
			alert('生成完成');
		}
	});
}
</script>
</body>
</html>
